<template>
  <div class="about">
    <!-- 导航部分 -->
    <nav class="blog-nav layui-header">
      <div class="blog-container">
        <a class="blog-logo" href="">梦中程序员</a>
        <ul class="layui-nav" lay-filter="nav">
          <li class="layui-nav-item layui-this">
            <a @click="toHome"
              ><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a
            >
          </li>
          <li class="layui-nav-item">
            <a @click="toAricle"
              ><i class="fa fa-file-text fa-fw"></i>&nbsp;文章分类</a
            >
          </li>
          <li class="layui-nav-item">
            <a @click="toAbout"
              ><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a
            >
          </li>
          <li class="layui-nav-item" style="margin-left: 100px">
            <i class="fa fa-user fa-fw"></i>&nbsp;
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ realName }}<i class="el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click="toManagement"
                  >管理页面</el-dropdown-item
                >
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
        <a class="blog-navicon" href="javascript:;">
          <i class="fa fa-navicon"></i>
        </a>
      </div>
    </nav>
    <!-- 手机导航 -->
    <ul
      class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide"
      lay-filter="nav"
    >
      <li class="layui-nav-item layui-this">
        <a @click="toHome"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
      </li>
      <li class="layui-nav-item">
        <a @click="toAricle"
          ><i class="fa fa-file-text fa-fw"></i>&nbsp;文章分类</a
        >
      </li>
      <li class="layui-nav-item">
        <a @click="toAbout"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
      </li>
    </ul>
    <div class="blog-body">
      <div class="blog-container">
        <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
          <a href="index.html" title="网站首页">网站首页</a>
          <a><cite>关于本站</cite></a>
        </blockquote>
        <div class="blog-main">
          <div class="layui-tab layui-tab-brief shadow" lay-filter="tabAbout">
            <ul class="layui-tab-title">
              <li lay-id="1">关于博客</li>
              <li lay-id="2">关于作者</li>
              <li lay-id="3" id="frinedlink">友情链接</li>
              <li lay-id="4">留言墙</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item">
                <div class="aboutinfo">
                  <div class="aboutinfo-figure">
                    <img
                      src="@/assets/images/favicon.jpg"
                      alt="梦中程序员"
                      width="100"
                      height="100"
                    />
                  </div>
                  <p class="aboutinfo-nickname">梦中程序员</p>
                  <p class="aboutinfo-introduce">
                    对于这种可能性基本为零的事情，我从来不考虑，因为我没有梦想。
                  </p>
                  <p class="aboutinfo-location">
                    <i class="fa fa-link"></i>&nbsp;&nbsp;<a
                      target="_blank"
                      href="https://sjclub.gitee.io/"
                      >https://sjclub.gitee.io/</a
                    >
                  </p>

                  <fieldset class="layui-elem-field layui-field-title">
                    <legend>简介</legend>
                    <div class="layui-field-box aboutinfo-abstract">
                      <p style="text-align: left">
                        只从百度传课不能使用以后，已经很久没有专门做视频了，服务器搭建的博客也经常被攻击，不是的无法访问，也没有那么多精力特意去维护，基本没什么渠道去分享自己对技术的理解了，去年在B站上录制了ThinkPHP和Laravel的俩个新手博客教程，内容可以说相当之简单，没有讲比较深入的内容，那怕是没有基础的去看视频，都可以学会，同时也出现了一个问题，因为视频过于简单，所以当时并没有写一些文档来告诉大家一些注意事项，这就导致了很多新手在开发过程当中，因为不熟练，写错字母，少些分号、大括号、括号等等问题，导致程序运行报错，但是又不会进行调试，我收到了很多的私信来询问原因，一一回复也太麻烦，所以就决定使用gitee来搭建一个博客，分享一些技术文章，同时对新手经常出现的错误做一些解释，把自己对于开发的理解分享给大家。
                      </p>
                      <h1 style="text-align: center">The End</h1>
                    </div>
                  </fieldset>
                </div>
              </div>
              <!--关于网站End-->
              <div class="layui-tab-item">
                <div class="aboutinfo">
                  <div class="aboutinfo-figure">
                    <img
                      src="@/assets/images/profile.jpg"
                      alt="梦中程序员"
                      width="100"
                      height="100"
                    />
                  </div>
                  <p class="aboutinfo-nickname">Leruge</p>
                  <p class="aboutinfo-introduce">
                    学历只是过去，学习决定未来。
                  </p>
                  <p class="aboutinfo-location">
                    <i class="fa fa-location-arrow"></i>&nbsp;河南 - 安阳
                  </p>
                  <hr />
                  <div class="aboutinfo-contact">
                    <a
                      target="_blank"
                      title="QQ交流"
                      href="javascript:layer.msg('启动QQ会话窗口')"
                      ><i class="fa fa-qq fa-2x"></i
                    ></a>
                    <a
                      target="_blank"
                      title="给我写信"
                      href="javascript:layer.msg('启动邮我窗口')"
                      ><i class="fa fa-envelope fa-2x"></i
                    ></a>
                    <a
                      target="_blank"
                      title="新浪微博"
                      href="javascript:layer.msg('转到你的微博主页')"
                      ><i class="fa fa-weibo fa-2x"></i
                    ></a>
                    <a
                      target="_blank"
                      title="码云"
                      href="javascript:layer.msg('转到你的github主页')"
                      ><i class="fa fa-git fa-2x"></i
                    ></a>
                  </div>
                  <fieldset class="layui-elem-field layui-field-title">
                    <legend>简介</legend>
                    <div
                      class="layui-field-box aboutinfo-abstract abstract-bloger"
                    >
                      <p style="text-align: center">
                        只从百度传课不能使用以后，已经很久没有专门做视频了，服务器搭建的博客也经常被攻击，不是的无法访问，也没有那么多精力特意去维护，基本没什么渠道去分享自己对技术的理解了，去年在B站上录制了ThinkPHP和Laravel的俩个新手博客教程，内容可以说相当之简单，没有讲比较深入的内容，那怕是没有基础的去看视频，都可以学会，同时也出现了一个问题，因为视频过于简单，所以当时并没有写一些文档来告诉大家一些注意事项，这就导致了很多新手在开发过程当中，因为不熟练，写错字母，少些分号、大括号、括号等等问题，导致程序运行报错，但是又不会进行调试，我收到了很多的私信来询问原因，一一回复也太麻烦，所以就决定使用gitee来搭建一个博客，分享一些技术文章，同时对新手经常出现的错误做一些解释，把自己对于开发的理解分享给大家。
                      </p>
                      <h1>个人信息</h1>
                      <p>暂无</p>
                      <h1>个人介绍</h1>
                      <p>一个没有故事的男同学，没什么介绍......</p>
                      <h1 style="text-align: center">The End</h1>
                    </div>
                  </fieldset>
                </div>
              </div>
              <!--关于作者End-->
              <div class="layui-tab-item">
                <div class="aboutinfo">
                  <div class="aboutinfo-figure">
                    <img
                      src="@/assets/images/handshake.png"
                      alt="梦中程序员"
                      width="100"
                      height="100"
                    />
                  </div>
                  <p class="aboutinfo-nickname">友情链接</p>
                  <p class="aboutinfo-introduce">
                    Name：梦中程序员&nbsp;&nbsp;&nbsp;&nbsp;Site：sjclub.gitee.io
                  </p>
                  <p class="aboutinfo-location">
                    <i class="fa fa-close"></i>经常宕机&nbsp;
                    <i class="fa fa-close"></i>不合法规&nbsp;
                    <i class="fa fa-close"></i>插边球站&nbsp;
                    <i class="fa fa-close"></i>红标报毒&nbsp;
                    <i class="fa fa-check"></i>原创优先&nbsp;
                    <i class="fa fa-check"></i>技术优先
                  </p>
                  <hr />
                  <div class="aboutinfo-contact">
                    <p style="font-size: 2em">互换友链，携手并进！</p>
                  </div>
                  <fieldset class="layui-elem-field layui-field-title">
                    <legend>Friend Link</legend>
                    <div class="layui-field-box">
                      <ul class="friendlink">
                        <li>
                          <a
                            target="_blank"
                            href="https://sjclub.gitee.io"
                            title="梦中程序员"
                            class="friendlink-item"
                          >
                            <p class="friendlink-item-pic">
                              <img
                                src="@/assets/images/favicon.jpg"
                                alt="梦中程序员"
                              />
                            </p>
                            <p class="friendlink-item-title">梦中程序员</p>
                            <p class="friendlink-item-domain">
                              sjclub.gitee.io
                            </p>
                          </a>
                        </li>
                        <li>
                          <a
                            target="_blank"
                            href="https://sjclub.gitee.io"
                            title="梦中程序员"
                            class="friendlink-item"
                          >
                            <p class="friendlink-item-pic">
                              <img
                                src="@/assets/images/favicon.jpg"
                                alt="梦中程序员"
                              />
                            </p>
                            <p class="friendlink-item-title">梦中程序员</p>
                            <p class="friendlink-item-domain">
                              sjclub.gitee.io
                            </p>
                          </a>
                        </li>
                        <li>
                          <a
                            target="_blank"
                            href="https://sjclub.gitee.io"
                            title="梦中程序员"
                            class="friendlink-item"
                          >
                            <p class="friendlink-item-pic">
                              <img
                                src="@/assets/images/favicon.jpg"
                                alt="梦中程序员"
                              />
                            </p>
                            <p class="friendlink-item-title">梦中程序员</p>
                            <p class="friendlink-item-domain">
                              sjclub.gitee.io
                            </p>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </fieldset>
                </div>
              </div>
              <!--友情链接End-->
              <div class="layui-tab-item">
                <div class="aboutinfo">
                  <div class="aboutinfo-figure">
                    <img src="@/assets/images/messagewall.png" alt="留言墙" />
                  </div>
                  <p class="aboutinfo-nickname">留言墙</p>
                  <p class="aboutinfo-introduce">
                    想对我说什么，大家畅所欲言。
                  </p>
                  <p class="aboutinfo-location">
                    <i class="fa fa-clock-o"></i>&nbsp;<span id="time"></span>
                  </p>
                  <hr />
                  <div class="aboutinfo-contact">
                    <p style="font-size: 2em">沟通交流，拉近你我！</p>
                  </div>
                  <fieldset class="layui-elem-field layui-field-title">
                    <legend>Leave a message</legend>
                    <div class="layui-field-box">
                      <div class="leavemessage" style="text-align: initial">
                        <form class="layui-form blog-editor" action="">
                          <div class="layui-form-item">
                            <textarea
                              name="editorContent"
                              lay-verify="content"
                              id="remarkEditor"
                              placeholder="请输入内容"
                              class="layui-textarea layui-hide"
                            ></textarea>
                          </div>
                          <div class="layui-form-item">
                            <button
                              class="layui-btn"
                              lay-submit="formLeaveMessage"
                              lay-filter="formLeaveMessage"
                            >
                              提交留言
                            </button>
                          </div>
                        </form>
                        <ul class="blog-comment">
                          <li>
                            <div class="comment-parent">
                              <img
                                src="@/assets/images/favicon.jpg"
                                alt="梦中程序员"
                              />
                              <div class="info">
                                <span class="username">梦中程序员</span>
                              </div>
                              <div class="content">
                                我为大家做了模拟留言与回复！试试吧！
                              </div>
                              <p class="info info-footer">
                                <span class="time">2019-03-18 18:09</span
                                ><a
                                  class="btn-reply"
                                  href="javascript:;"
                                  onclick="btnReplyClick(this)"
                                  >回复</a
                                >
                              </p>
                            </div>
                            <hr />
                            <div class="comment-child">
                              <img
                                src="@/assets/images/favicon.jpg"
                                alt="梦中程序员"
                              />
                              <div class="info">
                                <span class="username">Leruge</span
                                ><span>这是用户回复内容</span>
                              </div>
                              <p class="info">
                                <span class="time">2019-03-18 18:26</span>
                              </p>
                            </div>
                            <div class="comment-child">
                              <img
                                src="@/assets/images/favicon.jpg"
                                alt="梦中程序员"
                              />
                              <div class="info">
                                <span class="username">Leruge</span
                                ><span>这是第二个用户回复内容</span>
                              </div>
                              <p class="info">
                                <span class="time">2019-03-18 18:26</span>
                              </p>
                            </div>
                            <!-- 回复表单默认隐藏 -->
                            <div class="replycontainer layui-hide">
                              <form class="layui-form" action="">
                                <div class="layui-form-item">
                                  <textarea
                                    name="replyContent"
                                    lay-verify="replyContent"
                                    placeholder="请输入回复内容"
                                    class="layui-textarea"
                                    style="min-height: 80px"
                                  ></textarea>
                                </div>
                                <div class="layui-form-item">
                                  <button
                                    class="layui-btn layui-btn-mini"
                                    lay-submit="formReply"
                                    lay-filter="formReply"
                                  >
                                    提交
                                  </button>
                                </div>
                              </form>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </fieldset>
                </div>
              </div>
              <!--留言墙End-->
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer class="blog-footer">
      <p>
        <span>Copyright</span><span>&copy;</span><span>2019</span
        ><a href="">梦中程序员</a>
      </p>
      <p>
        <a href="http://www.miibeian.gov.cn/" target="_blank"
          >京ICP备18053420号-1</a
        >
      </p>
    </footer>

    <div class="blog-share layui-hide">
      <div class="blog-share-body">
        <div style="width: 200px; height: 100%">
          <div class="bdsharebuttonbox">
            <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
            <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
            <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
            <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
          </div>
        </div>
      </div>
    </div>
    <div class="blog-mask animated layui-hide"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      realName: sessionStorage.getItem("realName"),
    };
  },
  methods: {
    toAricle() {
      this.$router.push("/article");
    },
    toHome() {
      this.$router.push("/");
    },
    toAbout() {
      this.$router.push("/about");
    },
    toManagement() {
      this.$router.push("/layout");
    },
    logout() {
      sessionStorage.clear();
      this.$router.push("/login");
    },
  },
  mounted() {
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "/lib/layui/layui.js";
    document.body.appendChild(script);

    let script2 = document.createElement("script");
    script2.type = "text/javascript";
    script2.src = "/js/about.js";
    document.body.appendChild(script2);
  },
};
</script>

<style lang="less" scoped>
@import "/lib/layui/css/layui.css";
@import "/lib/font-awesome/css/font-awesome.min.css";
@import "../assets/css/global.css";
@import "../assets/css/about.css";

a {
  cursor: pointer;
}
</style>